<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
	<title>Connect through Facebook or Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="http://localhost:8000/static/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>
    <link href="../assets/css/bootstrap-responsive.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Le fav and touch icons -->
    <link rel="shortcut icon" href="../assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="../assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">

	<!-- Author: Nermeen Hashem
	this script is the form validation , its called it in the user input by setting class ="url"
	if the user entered invalid url , an error message will be shown-->

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
	<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.js"></script>

	<script>
	  $(document).ready(function(){
	    $("#SocialMarketing").validate();
	  });

	//--- Add a domain-check rule
	jQuery.validator.addMethod ("domainChk", function (value, element, params) {

	        if (this.optional (element) )
	            return true;

	        //--- Get the target domain, this will be in the rel attribute.
	        var targDomain  = $(element).attr ("rel");
	        var regExp      = new RegExp ("^https?:\/\/(www.)?" + targDomain + "\/", "i");

	        return regExp.test (value);
	    },
	    function errmess (params, element) {
	        return "This must be a valid URL for " + $(element).attr ("rel");
	    }
	);
	    </script>

	    <script type="text/javascript">

	jQuery.validator.addClassRules ( { domainChk: {domainChk: true} } );

	</script>
  </head>

  <body>

    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
   <ul class="nav">
          <a class="brand" href="/homePage/">Eventati</a>
          <li><a href ="/DashboardHome/">Home Page</a></li>      
          <li > <a href="/AboutUs/">About Us</a></li>
          <li><a href="/ViewInstructions/">Instructions</a></li>
          <li><a href  ="/Terms&Conditions/">  Terms & Conditions</a></li>
         <li><a href  ="/News/">  Latest News and Updates</a></li>
         <li><a href ="/Faqs/"> FAQS</a></li>
         <li><a href ="/Contactus/"> Contactus</a></li>
		<!-- Author: Amina Kadry This form is for logging the user out of his account -->

         <li><a href="/logout/" method="POST">Log out</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
<h1>Social Marketing </h1>
      <!-- Main hero unit for a primary marketing message or call to action -->

      <div class="hero-unit">
		<!-- this form takes as an input twitter Username , hashtag and facebook url -->
		<form id = "SocialMarketing" name = "SocialMarketing"  action="/social/" method="POST" >
		         {% csrf_token %}
					<br>
					<label for="twt">Please enter your Twitter Username</label> <br/>
					<input type="text" id="twt" name="twitterUserName" </input>
					</br>
					<br>
					<label for="fb"> Please enter your fan page Url on Facebook</label> <br/>
					<p> <font color = "blue">Note*: the Facebook Url has to start with http:// </font></p>
					<!--The domainChk rule expects the required domain to be in the rel attribute of the input
					and if the user entered a url that doesn't start with http://www.facebook.com/ an error 
					message will be shown-->
					<input  class="url domainChk" rel="facebook.com" type="text" id="fb" name="facebookUrl"</input> 
					</br>
					<br>
					<label for="hash">Please enter your Twitter HashTag</label>  <br/>
					<input type="text" id="hash" name="hashTag" ></input>
					</br>
					<!--failure message will be displayed if the user entered wrong facebook url or
					didnot enter any field-->
			<p> <font color = "RED">{{failureMessage}} </font></p>

					<button type="submit" value ="Submit">Submit</button>
		</form>
	       
      </div>

     
      <hr>

      <footer>
      <p class="pull-center">
		 <a href="/AboutUs/">About Us</a>
				<a href="/ViewInstructions/">Instructions</a>
				<a href  ="/Terms&Conditions/">  Terms & Conditions</a>
				<a href  ="/News/">  Latest News and Updates</a>
				<a href ="/Faqs/"> FAQS</a>
				<a href ="/Contactus/"> Contactus</a>
				<p class="pull-right"><a href="#">Back to top</a></p>

				        <p>&copy; Company 2012</p>      </footer>

    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="../assets/js/jquery.js"></script>
    <script src="../assets/js/bootstrap-transition.js"></script>
    <script src="../assets/js/bootstrap-alert.js"></script>
    <script src="../assets/js/bootstrap-modal.js"></script>
    <script src="../assets/js/bootstrap-dropdown.js"></script>
    <script src="../assets/js/bootstrap-scrollspy.js"></script>
    <script src="../assets/js/bootstrap-tab.js"></script>
    <script src="../assets/js/bootstrap-tooltip.js"></script>
    <script src="../assets/js/bootstrap-popover.js"></script>
    <script src="../assets/js/bootstrap-button.js"></script>
    <script src="../assets/js/bootstrap-collapse.js"></script>
    <script src="../assets/js/bootstrap-carousel.js"></script>
    <script src="../assets/js/bootstrap-typeahead.js"></script>

  </body>
</html>
